<template>
  <div id="container" style="width: 100%; height: 100vh;">
    <button class="refresh-button" @click="refresh">刷新</button>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { listCover, getCover, delCover, addCover, updateCover } from "@/api/managent/cover";

  const apiKey = ref('a3bc0efa917319111eee9a770881db23');
  const coverList = ref([]);
  let map;

  onMounted(() => {
  const script = document.createElement('script');
  script.src = `https://webapi.amap.com/maps?v=1.4.15&key=${apiKey.value}`;
  script.onload = () => {
    getCoverList();
    initMap();
  };
  document.head.appendChild(script);
});


function initMap() {
  map = new AMap.Map('container', {
    resizeEnable: true, 
    zoom: 11,
    center: [120.591389, 31.314338] 
  });

  coverList.value.forEach(item => {
    const marker = new AMap.Marker({
      position: new AMap.LngLat(item.longitude, item.latitude),
      title: item.remark || '无备注'
    });

    map.add(marker);
  });

}

function refresh(){
  getCoverList();

  coverList.value.forEach(item => {
    const marker = new AMap.Marker({
      position: new AMap.LngLat(item.longitude, item.latitude),
      title: item.remark || '无备注'
    });

    map.add(marker);
  });
}

function getCoverList(){
  listCover().then(response => {
  coverList.value = response.rows;
});
}



</script>

<style scoped>
.refresh-button {
position: absolute; /* 使用绝对定位 */
top: 10px; /* 距离顶部10px */
right: 10px; /* 距离右侧10px */
padding: 10px 20px; /* 内边距 */
font-size: 16px; /* 字体大小 */
color: #fff; /* 文本颜色 */
background-color: #007bff; /* 背景颜色 */
border: none; /* 去掉边框 */
border-radius: 5px; /* 圆角 */
cursor: pointer; /* 鼠标悬停时显示指针 */
outline: none; /* 去掉焦点时的外轮廓 */
z-index: 9999; /* 设置一个较高的z-index值，确保按钮在最上方 */
}

/* 鼠标悬停在按钮上时的样式 */
.refresh-button:hover {
background-color: #0056b3; /* 背景颜色变深 */
}
</style>
